<template>
  <div class="container">
    <van-sticky>
      <div class="head">
        <img class="head-back-img" @click="goBack" src="../../assets/back.svg" alt="">
        <div class="title">用户信息</div>
      </div>
    </van-sticky>
    <div class="example">
      <van-form @submit="submitButton" class="form" ref="form" labelWidth="100">
        <div margin="17rpx 18rrpx" spacing="0px" padding="10px 20px 10px 20px" class="positionLeft">
          <div class="">
            <div class="img-head">
              <div>
                <div>头像</div>
                <van-uploader :deletable="true" v-model="fileList" multiple :max-count="1" />
              </div>

            </div>
            <!--            <van-field name="uploader" label="头像">-->
            <!--              <template #input>-->
            <!--                <van-uploader v-model="fileList" multiple :max-count="1" />-->
            <!--              </template>-->
            <!--            </van-field>-->
            <van-field label="昵称" v-model="nickName" :rules="[{ required: true, trigger: 'onBlur', message: '请填写昵称' }]"
              placeholder="请填写昵称"></van-field>
            <!--              <van-field label="手机号码" :rules="[{ pattern,trigger:'onBlur', message: '请输入正确的手机格式' }]" v-model="phonenumber"  placeholder="请填写手机号码"></van-field>-->

            <van-field label="性别" :rules="[{ required: true, trigger: 'onBlur', message: '请选择性别' }]"
              @click="show = true" disabledColor="#ffffff" v-model="sex" placeholder="请选择性别"></van-field>

          </div>
        </div>
      </van-form>
      <div class="btn">
        <div class="submitButton" @click="goOut">退出登录</div>
        <van-button class="submitButton" round block type="info" @click="submitButton">提交修改</van-button>
      </div>

    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker title="选择性别" show-toolbar :columns="columns" @confirm="confirm" @cancel="show = false" />
    </van-popup>

  </div>
</template>

<script>
import indexApi from "@/api/index";
import axios from 'axios';
import config from "@/config";
import { Toast, Dialog } from 'vant'
import Cookies from "js-cookie";
export default {
  data() {
    return {
      show: false,
      columns: ['男', '女'],
      fileList: [],
      pattern: /^1[3-9]\d{9}$/,
      nickName: '',
      phonenumber: '',
      sex: '',
      sexId: -1
    };
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    confirm(e) {
      this.sex = e;
      if (e === '男') {
        this.sexId = '0'
      } else {
        this.sexId = '1'
      }
      this.show = false;
    },
    goOut() {
      Dialog.confirm({
        title: '退出登录',
        message: '此操作将会退出登录并返回到登录页面',
      })
        .then(() => {
          localStorage.removeItem("token")
          this.$router.push('/login')
        })
        .catch(() => {
          this.$router.push('/login')
        });
    },
    async submitButton() {
      try {
        // 等待表单验证完成
        await this.$refs.form.validate();
        const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
        let info = {
          nickName: this.nickName,
          // phonenumber:this.phonenumber,
          sex: this.sexId
        }
        if (this.fileList.length !== 0) {
          const file = this.fileList[0].file
          const formData = new FormData();
          formData.append('file', file);
          try {
            const response = await axios.post(`${baseUrl}/common/upload`, formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
                Authorization: Cookies.get("token")
              }
            });
            info.avatar = response.data.url
            if (response.data.url) {
              indexApi.updateUser(info).then(res => {
                Toast('修改成功！');
                setTimeout(() => {
                  this.$router.push({
                    path: '/user'
                  })
                }, 2000)
              })
            }
          } catch (error) {
            Toast('上传失败！');
          }
        } else {
          indexApi.updateUser(info).then(res => {
            Toast('修改成功！');
            setTimeout(() => {
              this.$router.push({
                path: '/user'
              })
            }, 2000)
          })
        }
      } catch (error) {
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .van-sticky {
  background: #FFFFFF;

}

::v-deep .van-field--disabled .van-field__label {
  color: #646566;
}

::v-deep .van-field__control:disabled {
  color: #323233;
}

.container {
  background: #fafafa;
  height: 100vh;
  overflow: hidden;

  .form {
    width: calc(100% - 20px);
    margin: 10px auto 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;

    .positionLeft {
      .img-head {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;

        >div {
          display: flex;
          align-items: center;
          width: 100%;
          border-bottom: 1px solid #ebedf0;
          padding-bottom: 10px;

          >div:nth-child(1) {
            color: #646566;
            width: 100px;
            font-size: 14px;
            margin-right: 12px;

          }

          ::v-deep .van-uploader {
            width: 50px;
            height: 50px;
          }

          ::v-deep .van-uploader__wrapper {
            width: 100%;
            height: 100%;
          }

          ::v-deep .van-uploader__upload {
            width: 100%;
            height: 100%;
          }

          ::v-deep .van-uploader__upload {
            margin: 0;
          }

          ::v-deep .van-uploader__upload-icon {
            font-size: 16px;
          }

          ::v-deep .van-uploader__preview {
            width: 100%;
            height: 100%;
            margin: 0;
          }

          ::v-deep .van-uploader__preview-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
        }

      }
    }
  }

  .btn {
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 10px;
    left: 10px;
  }

  .btn>.submitButton {
    width: 48%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }

  .btn>.submitButton:first-child {
    background: #86909c;
    //background: linear-gradient(94deg, rgba(238, 71, 59, 0.05) 0%, #545252 58%, rgba(248, 242, 242, 0.3) 100%);
  }

  .submitButton {

    border-radius: 30px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    background: rgba(238, 71, 59, 0.5);
    //background: linear-gradient(94deg, rgba(238, 71, 59, 0.05) 0%, #f6766d 58%, rgba(238, 71, 59, 0.3) 100%);
  }
}

::v-deep .van-button--info {
  border: none;
}

.head {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative; // 关键：设置相对定位
  background-color: #ffffff;

  .head-back-img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 15px;
  }

  .title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #000000;
  }
}
</style>
